<template>
    <div class="content">
        <el-row class="filter_btn">
            <el-col :span="16">
                <el-col :span="2" class="title hpx-label">
                    竞价列表
                </el-col>
                <el-radio-group v-model="biddingStatus" size="medium" @change="changeStatus()">
                    <el-radio-button v-for="item in bidOptions" :label="item.key" :key="item.key">{{item.label}}<MarkRemind :tipsNum="getBidTips(item)" class="bid_tips"/></el-radio-button>
                </el-radio-group>
            </el-col>
            <el-col :span="6" :offset="2" class="delete" v-if="this.biddingStatus != '1'">
                <el-button type="danger" size="mini" @click="remove()" :disabled="sectionArr.length == 0 && isSelect"><i class="iconfont icon-shanchu"></i> 删除</el-button>
                <el-button type="text" v-if="isSelect" @click="cancelCheck">取消</el-button>
            </el-col>
        </el-row>
        <template>
                    <!-- @remove="click_delete" -->
            <Table :tableData="tableData"
                    :isSelect="isSelect" 
                    @selection="selection" 
                    @change="changePage"
                    @changes="changeSize"
                    :tableName="'myBidding'">
                <template slot-scope="{scope}">
                    <el-button v-if="scope.row.bill_status_code == 804 && scope.row.bid_result == 1"
                        type="primary" 
                        size="small" 
                        @click="payment(scope.row)">付款
                    </el-button>
                    <el-button
                        type="text" 
                        size="small"
                        @click="detailPage(scope.row)">
                        <i class="iconfont icon-xiangqing2"></i> 详情
                    </el-button> 
                </template>
            </Table>
        </template>
        <!-- 付款弹框 -->
        <DialogPayment ref="payment" @updataTable="updataTable"/>
        <!-- 删除竞价警告弹框 -->
        <DialogInput ref="remin" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row>删除报价即为取消原竞价，是否删除已选择的{{sectionArr.length}}个竞价?</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmDetail()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
        <!-- 成功删除弹框 -->
        <DialogInput ref="success" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>已成功删除竞价</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator'
    import Table from '@component/common/HpxTable.vue'  
    import DialogInput from '@component/common/DialogInput.vue'  
    import FormTitle from '@component/common/FormTitle.vue'
    import moment from 'moment' 
    import { hideStr, ellipsis } from '@/util/format'
    import DialogPayment from '@component/common/DialogPayment.vue'
    import MarkRemind from '@component/common/MarkRemind.vue';
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
    import calc from 'calculatorjs'
    @Component({
        components:{
            Table,
            DialogInput,
            FormTitle,
            DialogPayment,
            MarkRemind
        },
        computed: {
            ...mapState({
                allTips: 'allTips'
            })
        }
    })
    export default class MyBidding extends Vue {
        getBidTips (item) {
            switch (item.key){
                case '':
                    return this.allTips.biddingTotalCount;
                case '0':
                    return this.allTips.biddingRuningCount;
                case '1':
                    return this.allTips.biddingSuccessCount;
                case '2':
                    return this.allTips.biddingLoserCount;
            }
        }
        biddingStatus:string = ""
        bidOptions = [{
                label: '全部竞价',
                key: ''
            },{
                label: '竞价中',
                key: '0'
            },{
                label: '竞价成功',
                key: '1'
            },{
                label: '竞价失败',
                key: '2'
        }]
        tableData:TableData = {
            header:[
                {
                    label: '发布时间',
                    key: 'bill_publishing_time',
                    formatter: (row:any) => moment(row.bill_publishing_time).format('MM-DD HH:mm')
                },
                {
                    label: '承兑人',
                    key: 'acceptor_name',
                    formatter: (row:any) => ellipsis(row.acceptor_name, '', 8)
                },
                {
                    label: '票面金额(万)',
                    key: 'bill_sum_price',
                    formatter: (row:any) => calc.div(row.bill_sum_price, 10000)
                },
                {
                    label: '到期时间',
                    key: 'bill_deadline_time'
                },
                {
                    label: '报价利率/每十万加',
                    key: 'bid_rate',
                    formatter: (row:any) => this.everyPlus(row.bill_bidding_model_id, row.bid_rate, row.bid_every_plus)
                },
                {
                    label: '约合每十万扣款',
                    key: 'bidding_every_plus_interest',
                    formatter: (row:any) => row.bidding_every_plus_interest ? row.bidding_every_plus_interest : '--'
                },
                {
                    label: '报价时间',
                    key: 'bid_time',
                    formatter: (row:any) => moment(row.bid_time).format('MM-DD HH:mm')
                },
                {
                    label: '票号后六位数',
                    key: 'bill_number',
                    formatter: (row:any) => hideStr(row.bill_number)
                },
                {
                    label: '状态',
                    key: 'bid_status'
                }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            }
        }
        //是否显示勾选框
        isSelect:boolean = false
        sectionArr = []
    //methods
        //改变状态
        changeStatus () {
            if(this.biddingStatus == '1'){
                this.isSelect = false
            }
            this.tableData.footer.currentPage = 1
            this.getBidList()
        }
        //获取我的竞价列表
        async getBidList () {
            let params = {
                billTypeId: 101,
                status: this.biddingStatus || '',
                n: this.tableData.footer.pageSize,
                p: this.tableData.footer.currentPage
            }
            let res = await this.$http.get('bills/bidding/getAllBiddings',{params})
            if(res.status == 200){
                this.tableData.body = res.data.bill_product_biddings 
                this.tableData.footer.total = res.data.page_info.items_number
                this.tableData.footer.pageSize = res.data.page_info.items_per_page
            }
        }
        //详情页
        detailPage (row) {
            if(row.bill_status_code < 804){
                //竞价中
                this.$router.push(`/buyer/myBidding/detail/${row.bill_product_id}`)
            }else{
                this.$router.push(`/buyer/order/detail/${row.order_id}`)
            }
        }
        //报价利率/每十万加
        everyPlus (mode:number,rate,everyplus) {
            // if(mode == 3210){
            //     return everyplus != 0 && everyplus != null ? rate + '%+' + everyplus : rate + '%'
            // }else{
            //     return rate + '%'
            // }
            return (rate && rate != 0 ? rate + '%' : '') + (rate && everyplus && rate != 0 && everyplus != 0 ? '+' : '') + (everyplus && everyplus != 0 ? everyplus : '')
        }
        //显示/隐藏勾选框
        remove () {
            this.isSelect ? this.$refs['remin'].openDialog() : this.isSelect = true
        }
        //取消勾选
        cancelCheck () {
            this.isSelect = false
        }
        //勾选
        selection (item) {
            this.sectionArr = item;
        }
        //付款
        payment (item) {
            this.$refs['payment'].openDialog(item.order_id);
        }
        //付款成功回调
        updataTable () {
            this.getBidList()
        }
        //删除
        // click_delete () {
        //     this.$refs['remin'].openDialog();
        // }
        //确定删除
        async confirmDetail () {
            let willDelete = this.sectionArr.map(item => item.id)
            let res = await this.$http.delete(`bills/bidding/${willDelete.join(',')}`)
            if(res.status == 200){
                this.$refs['remin'].closeDialog();
                this.$refs['success'].openDialog();
                this.isSelect = false
                this.getBidList()
            }
        }
        closeDialog () {
            this.$refs['remin'].closeDialog();
            this.$refs['success'].closeDialog();
        }
        //分页回调
        changePage (page:number) {
            this.tableData.footer.currentPage = page
            this.getBidList()  
        }
        changeSize (size:number) {
            this.tableData.footer.pageSize = size
            this.getBidList()
        }
        mounted () {
            this.getBidList()
        }
    }
</script>

<style lang="scss" scoped>
    .bid_tips {
        position: absolute;
        top: 0;
        right: 0;
    }
</style>